<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./wkt/terraformer.js"></script>
    <script src="./wkt/terraformer-wkt-parser.js"></script>

</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;

        let wkts = "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 29.9699202912212))";
        let geojson = {
            "type": "Polygon",
            "coordinates": [
                [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]],
                [[100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2]]
            ]
        }

        console.log("wkt转geojson", Terraformer.WKT.parse(wkts))
        console.log("geojson转wkt", Terraformer.WKT.convert(geojson))

        var promise = Cesium.GeoJsonDataSource.load(Terraformer.WKT.parse(wkts), {
            clampToGround: true,  
            fill: Cesium.Color.PINK.withAlpha(0.6),
        });
        promise.then(function (dataSource) {
            viewer.dataSources.add(dataSource);
        });
        viewer.flyTo(promise);

    </script>
</body>

</html>